<template>
  <!-- 主体部分 -->
  <div style="height:100vh;width:100%;overflow:hidden;position:relative;">
    <div class="menu-side">
      <el-menu class="el-menu-nav"
        :default-active="activeMenu"
        mode="vertical"
        background-color="rgba(0,2,34,0)"
        text-color="#aaa"
        active-text-color="#fff">
        <template v-for="menu of navMenus" :key="menu.id">
          <el-tooltip class="item" effect="dark" :content="menu.label" placement="right">
            <el-menu-item :index="menu.id" @click="switchComponent(menu.id)">
               <i :class="menu.icon"></i>
            </el-menu-item>
          </el-tooltip>
        </template>
      </el-menu>
    </div>

    <!-- 视图区域 -->
    <div class="view-container">
      <!-- 使用动态组件切换 -->
      <component :is="currentComponent" style="height: 100%; width: 100%; display: block;"></component>
    </div>

  </div>

</template>

<script>
import KnowledgeView from './knowledgeView.vue'
import KnowledgeEditor from './knowledgeEditor.vue'
import KnowledgeNodeShadow from './knowledgeNodeShadow.vue'

export default {
  name: 'Index',
  components: {
    KnowledgeView,
    KnowledgeEditor,
    KnowledgeNodeShadow
  },
  data () {
    return {
      // 当前激活的组件
      currentComponent: 'KnowledgeView',
      //定义导航菜单数据
      navMenus:[
        {
          id:'knowledgeView',
          label:'图谱展示',
          component: 'KnowledgeView',
          icon:'el-icon-s-grid'
        },
        {
          id:'knowledgeEditor',
          label:'图谱编辑',
          component: 'KnowledgeEditor',
          icon:'el-icon-edit'
        },
        {
          id:'knowledgeNodeShadow',
          label:'节点阴影效果',
          component: 'KnowledgeNodeShadow',
          icon:'el-icon-box'
        }
      ]
    }
  },
  methods: {
    // 切换组件
    switchComponent(componentId) {
      const menu = this.navMenus.find(item => item.id === componentId)
      if (menu) {
        this.currentComponent = menu.component
      }
    }
  },
  created () {
    // 默认显示第一个组件
    this.currentComponent = this.navMenus[0].component
  },
  computed: {
    //动态监控选中菜单
    activeMenu() {
      return this.navMenus.find(menu => menu.component === this.currentComponent)?.id || 'knowledgeView'
    }
  }
}
</script>

<style scoped>
  .menu-side{
     width: 60px;
     position: fixed;
     top: 0;
     left: 0;
     bottom: 0;
     background-color: #433b60;
     z-index: 1000;
     box-sizing: border-box;
  }

  .view-container{
    margin-left: 60px;
    height: 100vh;
    width: calc(100% - 60px);
    overflow: hidden;
    position: relative;
    background-color: #f5f5f5;
    box-sizing: border-box;
  }

  .el-menu-nav {
    border-right: none;
  }

  .el-menu-item {
    height: 60px;
    line-height: 60px;
    text-align: center;
  }

  .el-menu-item i {
    font-size: 20px;
  }
</style>
